<template>
  <div class="AICharacter-search">
    <el-input
        v-model="searchQuery"
        placeholder="搜索角色名称（如：哈利波特、苏格拉底）"
        prefix-icon="Search"
        class="search-input"
    />
    <el-button type="primary" @click="searchCharacter">搜索</el-button>

    <div v-if="loading" class="loading-container">
      <el-loading-spinner class="loading-spinner"/>
      <span>正在搜索角色...</span>
    </div>

    <div v-else-if="characters.length > 0" class="AICharacter-list">
      <h3>搜索结果</h3>
      <el-card
          v-for="AICharacter in characters"
          :key="AICharacter.id"
          class="AICharacter-card"
          @click="selectCharacter(AICharacter)"
      >
        <template #header>
          <div class="card-header">
            <span>{{ AICharacter.name }}</span>
          </div>
        </template>
        <div class="AICharacter-info">
          <img v-if="AICharacter.imgUrl" :src="AICharacter.imgUrl" alt="{{ AICharacter.name }}"
               class="AICharacter-image">
          <p class="AICharacter-description">{{ AICharacter.description }}</p>
        </div>
      </el-card>
    </div>

    <div v-else-if="searchQuery && !loading" class="no-results">
      <p>未找到相关角色，请尝试其他关键词</p>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import api from '../api.js';

const props = defineProps({
  onCharacterSelect: {
    type: Function,
    required: true
  }
});

const searchQuery = ref('');
const characters = ref([]);
const loading = ref(false);

// 模拟角色数据
const mockCharacters = [
  {
    id: '1',
    name: '哈利波特',
    description: '《哈利波特》系列小说的主角，霍格沃茨魔法学校的学生，与伏地魔展开多次对决。',
    imgUrl: 'https://images.example.com/harry-potter.jpg'
  },
  {
    id: '2',
    name: '苏格拉底',
    description: '古希腊哲学家，西方哲学的奠基人之一，以提问和对话的方式探讨伦理和知识。',
    imgUrl: 'https://images.example.com/socrates.jpg'
  },
  {
    id: '3',
    name: '爱因斯坦',
    description: '著名物理学家，相对论的创立者，被认为是现代物理学之父。',
    imgUrl: 'https://images.example.com/einstein.jpg'
  }
];

const searchCharacter = async () => {

  loading.value = true;
  characters.value = [];

  try {
    // 调用后端API获取角色数据
    // 注意：目前后端没有专门的角色搜索API，这里保留模拟数据但用API请求的形式呈现
    // 实际项目中应该替换为真实的API调用
    const response = await api.get('/api/character/search', {
      params: {query: searchQuery.value}
    }).then(data => {
      characters.value = data;
      console.log(data)
      loading.value = false;
    }).catch(() => {
      // 如果API调用失败，返回模拟数据
      return {
        data: mockCharacters.filter(AICharacter =>
            AICharacter.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
            AICharacter.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      };
    });


  } catch (error) {
    console.error('搜索角色失败:', error);
    loading.value = false;
  }
};
onMounted(()=>{
  searchCharacter()
})
const selectCharacter = (AICharacter) => {
  props.onCharacterSelect(AICharacter);
};
</script>

<style scoped>
.AICharacter-search {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  margin-bottom: 15px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.AICharacter-list {
  margin-top: 20px;
}

.AICharacter-card {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.AICharacter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.AICharacter-info {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.AICharacter-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.AICharacter-description {
  flex: 1;
  margin: 0;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.no-results {
  text-align: center;
  margin-top: 20px;
  color: #999;
}
</style>